<html>
<script src="../../../../node_modules/trtc-js-sdk/trtc.js"></script>
<extend name="Public/base"/>
<block name="style">
    <style>
      #uploadVideoBtn {
        width: 120px;
        height: 30px;
        line-height: 30px;
        border: 1px solid #ccc;
        border-radius: 5px;
        text-align: center;
        background: #FFFFFF;
      }

      button {
        margin-top: 20px;
      }
    </style>
</block>
<block name="body">
    <script src="/Public/static/live/TRTCSDK/trtc.js"></script>
    <script src="/Public/static/live/TWEBLIVE/tweblive.js"></script>
    <div id="playerView" style="width:500px; height:500px;"></div>
    <div id="shareView" style="width: 600px; height: 400px; border: 1px solid #000;"></div>

    <button onclick="pullLive()" style="width: 100px; height: 30px; margin-top: 20px;">观看直播</button>
    <button onclick="getShare()" style="width: 100px; height: 30px; margin-top: 20px;">获取屏幕分享</button>
    <script>
        var SDKAppId = {$SDKAppID};
        var userId = "{$userID}";
        var userSig = "{$userSig}";
        var roomID = "{$roomID}";

        let client = TRTC.createClient({
            mode: 'rtc',
            sdkAppId: SDKAppId,
            userId: userId,
            userSig: userSig
        });

        client.on('stream-removed', evt => {
            console.log('用户端已经监听到屏幕分享已结束')

            const remoteStream = evt.stream;
            const id = remoteStream.getId();
            console.log('id：' + id)
            console.log(`stream-removed ID: ${id}  type: ${remoteStream.getType()}`);
        });

        function pullLive()
        {
            // ------------- 当需要拉流播放时，创建 Player（播放器）对象，最简单的拉流仅需3步 -------------
            // 1、创建 Player（播放器）对象
            let player = TWebLive.createPlayer();

            // 2、设置渲染界面
            player.setRenderView({elementID: 'playerView'});

            // 3、填入 flv hls 地址等信息，拉 CDN 流播放，此时 url 必须以 `https://` 开头
            // 或 填入 sdkappid roomid 等信息，拉 WebRTC 低延时流播放，此时 url 必须以 `room://` 开头
            // let url = 'https://'
            //     + 'flv=' + encodeURIComponent('https://200002949.vod.myqcloud.com/200002949_b6ffc.f0.flv') + '&' // 请替换成实际可用的播放地址
            //     + 'hls=' + encodeURIComponent('https://200002949.vod.myqcloud.com/200002949_b6ffc.f0.m3u8') // 请替换成实际可用的播放地址

            let url = `room://sdkappid=` + SDKAppId + `&roomid=` + roomID + `&userid=` + userId + `&usersig=` + userSig;
            player.startPlay(url).then(() => {
                console.log('player | startPlay | ok');
            }).catch((error) => {
                console.error('player | startPlay | failed', error);
            });
        }
    </script>

</block>

<block name="script">
    <script src="__STATIC__/thinkbox/jquery.thinkbox.js"></script>
    <script type="text/javascript">
        //导航高亮
        highlight_subnav('{:U("Manage/pull")}');
    </script>
</block>

</html>
